<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
   	 <title>Bootstrap3响应式后台管理系统模版MeAdmin 静态表格</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"
    />
    <!--[if lt IE 9]>
      <link rel="stylesheet" type="text/css" href="plugins/jquery-ui/jquery.ui.1.10.2.ie.css"
      />
    <![endif]-->
    <link href="assets/css/main.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/responsive.css" rel="stylesheet" type="text/css"
    />
    <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="assets/css/fontawesome/font-awesome.min.css">
    <!--[if IE 7]>
      <link rel="stylesheet" href="assets/css/fontawesome/font-awesome-ie7.min.css">
    <![endif]-->
    <!--[if IE 8]>
      <link href="assets/css/ie8.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <!--<link href='http://fonts.useso.com/css?family=Open+Sans:400,600,700'-->
    <!--rel='stylesheet' type='text/css'>-->
    <script type="text/javascript" src="assets/js/libs/jquery-1.10.2.min.js">
    </script>
    <script type="text/javascript" src="plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js">
    </script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js">
    </script>
    <script type="text/javascript" src="assets/js/libs/lodash.compat.min.js">
    </script>
    <!--[if lt IE 9]>
      <script src="assets/js/libs/html5shiv.js">
      </script>
    <![endif]-->
    <script type="text/javascript" src="plugins/touchpunch/jquery.ui.touch-punch.min.js">
    </script>
    <script type="text/javascript" src="plugins/event.swipe/jquery.event.move.js">
    </script>
    <script type="text/javascript" src="plugins/event.swipe/jquery.event.swipe.js">
    </script>
    <script type="text/javascript" src="assets/js/libs/breakpoints.js">
    </script>
    <script type="text/javascript" src="plugins/respond/respond.min.js">
    </script>
    <script type="text/javascript" src="plugins/cookie/jquery.cookie.min.js">
    </script>
    <script type="text/javascript" src="plugins/slimscroll/jquery.slimscroll.min.js">
    </script>
    <script type="text/javascript" src="plugins/slimscroll/jquery.slimscroll.horizontal.min.js">
    </script>
    <script type="text/javascript" src="plugins/sparkline/jquery.sparkline.min.js">
    </script>
    <script type="text/javascript" src="plugins/daterangepicker/moment.min.js">
    </script>
    <script type="text/javascript" src="plugins/daterangepicker/daterangepicker.js">
    </script>
    <script type="text/javascript" src="plugins/blockui/jquery.blockUI.min.js">
    </script>
    <script type="text/javascript" src="plugins/uniform/jquery.uniform.min.js">
    </script>
    <script type="text/javascript" src="plugins/select2/select2.min.js">
    </script>
    <script type="text/javascript" src="assets/js/app.js">
    </script>
    <script type="text/javascript" src="assets/js/plugins.js">
    </script>
    <script type="text/javascript" src="assets/js/plugins.form-components.js">
    </script>
    <script>
      $(document).ready(function() {
        App.init();
        Plugins.init();
        FormComponents.init()
      });
    </script>
    <script type="text/javascript" src="assets/js/custom.js">
    </script>
  </head>
  
  <body>
    <header class="header navbar navbar-fixed-top" role="banner">
      <div class="container">
        <ul class="nav navbar-nav">
          <li class="nav-toggle">
            <a href="javascript:void(0);" title="">
              <i class="icon-reorder">
              </i>
            </a>
          </li>
        </ul>
        <a class="navbar-brand" href="index.html">
          <img src="assets/img/logo.png" alt="logo" />
          <strong>
            Me
          </strong>
          Admin
        </a>
        <a href="#" class="toggle-sidebar bs-tooltip" data-placement="bottom"
        data-original-title="Toggle navigation">
          <i class="icon-reorder">
          </i>
        </a>
        <ul class="nav navbar-nav navbar-left hidden-xs hidden-sm">
          <li>
            <a href="#">
              Dashboard
            </a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Dropdown
              <i class="icon-caret-down small">
              </i>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">
                  <i class="icon-user">
                  </i>
                  Example #1
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="icon-calendar">
                  </i>
                  Example #2
                </a>
              </li>
              <li class="divider">
              </li>
              <li>
                <a href="#">
                  <i class="icon-tasks">
                  </i>
                  Example #3
                </a>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="icon-warning-sign">
              </i>
              <span class="badge">
                5
              </span>
            </a>
            <ul class="dropdown-menu extended notification">
              <li class="title">
                <p>
                  You have 5 new notifications
                </p>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="label label-success">
                    <i class="icon-plus">
                    </i>
                  </span>
                  <span class="message">
                    New user registration.
                  </span>
                  <span class="time">
                    1 mins
                  </span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="label label-danger">
                    <i class="icon-warning-sign">
                    </i>
                  </span>
                  <span class="message">
                    High CPU load on cluster #2.
                  </span>
                  <span class="time">
                    5 mins
                  </span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="label label-success">
                    <i class="icon-plus">
                    </i>
                  </span>
                  <span class="message">
                    New user registration.
                  </span>
                  <span class="time">
                    10 mins
                  </span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="label label-info">
                    <i class="icon-bullhorn">
                    </i>
                  </span>
                  <span class="message">
                    New items are in queue.
                  </span>
                  <span class="time">
                    25 mins
                  </span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="label label-warning">
                    <i class="icon-bolt">
                    </i>
                  </span>
                  <span class="message">
                    Disk space to 85% full.
                  </span>
                  <span class="time">
                    55 mins
                  </span>
                </a>
              </li>
              <li class="footer">
                <a href="javascript:void(0);">
                  View all notifications
                </a>
              </li>
            </ul>
          </li>
          <li class="dropdown hidden-xs hidden-sm">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="icon-tasks">
              </i>
              <span class="badge">
                7
              </span>
            </a>
            <ul class="dropdown-menu extended notification">
              <li class="title">
                <p>
                  You have 7 pending tasks
                </p>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="task">
                    <span class="desc">
                      Preparing new release
                    </span>
                    <span class="percent">
                      30%
                    </span>
                  </span>
                  <div class="progress progress-small">
                    <div style="width: 30%;" class="progress-bar progress-bar-info">
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="task">
                    <span class="desc">
                      Change management
                    </span>
                    <span class="percent">
                      80%
                    </span>
                  </span>
                  <div class="progress progress-small progress-striped active">
                    <div style="width: 80%;" class="progress-bar progress-bar-danger">
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="task">
                    <span class="desc">
                      Mobile development
                    </span>
                    <span class="percent">
                      60%
                    </span>
                  </span>
                  <div class="progress progress-small">
                    <div style="width: 60%;" class="progress-bar progress-bar-success">
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="task">
                    <span class="desc">
                      Database migration
                    </span>
                    <span class="percent">
                      20%
                    </span>
                  </span>
                  <div class="progress progress-small">
                    <div style="width: 20%;" class="progress-bar progress-bar-warning">
                    </div>
                  </div>
                </a>
              </li>
              <li class="footer">
                <a href="javascript:void(0);">
                  View all tasks
                </a>
              </li>
            </ul>
          </li>
          <li class="dropdown hidden-xs hidden-sm">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="icon-envelope">
              </i>
              <span class="badge">
                1
              </span>
            </a>
            <ul class="dropdown-menu extended notification">
              <li class="title">
                <p>
                  You have 3 new messages
                </p>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="photo">
                    <img src="assets/img/demo/avatar-1.jpg" alt="" />
                  </span>
                  <span class="subject">
                    <span class="from">
                      Bob Carter
                    </span>
                    <span class="time">
                      Just Now
                    </span>
                  </span>
                  <span class="text">
                    Consetetur sadipscing elitr...
                  </span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="photo">
                    <img src="assets/img/demo/avatar-2.jpg" alt="" />
                  </span>
                  <span class="subject">
                    <span class="from">
                      Jane Doe
                    </span>
                    <span class="time">
                      45 mins
                    </span>
                  </span>
                  <span class="text">
                    Sed diam nonumy...
                  </span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <span class="photo">
                    <img src="assets/img/demo/avatar-3.jpg" alt="" />
                  </span>
                  <span class="subject">
                    <span class="from">
                      Patrick Nilson
                    </span>
                    <span class="time">
                      6 hours
                    </span>
                  </span>
                  <span class="text">
                    No sea takimata sanctus...
                  </span>
                </a>
              </li>
              <li class="footer">
                <a href="javascript:void(0);">
                  View all messages
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" class="dropdown-toggle row-bg-toggle">
              <i class="icon-resize-vertical">
              </i>
            </a>
          </li>
          <li class="dropdown">
            <a href="#" class="project-switcher-btn dropdown-toggle">
              <i class="icon-folder-open">
              </i>
              <span>
                Projects
              </span>
            </a>
          </li>
          <li class="dropdown user">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="icon-male">
              </i>
              <span class="username">
                John Doe
              </span>
              <i class="icon-caret-down small">
              </i>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="pages_user_profile.html">
                  <i class="icon-user">
                  </i>
                  My Profile
                </a>
              </li>
              <li>
                <a href="pages_calendar.html">
                  <i class="icon-calendar">
                  </i>
                  My Calendar
                </a>
              </li>
              <li>
                <a href="#">
                  <i class="icon-tasks">
                  </i>
                  My Tasks
                </a>
              </li>
              <li class="divider">
              </li>
              <li>
                <a href="login.html">
                  <i class="icon-key">
                  </i>
                  Log Out
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div id="project-switcher" class="container project-switcher">
        <div id="scrollbar">
          <div class="handle">
          </div>
        </div>
        <div id="frame">
          <ul class="project-list">
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-desktop">
                  </i>
                </span>
                <span class="title">
                  Lorem ipsum dolor
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-compass">
                  </i>
                </span>
                <span class="title">
                  Dolor sit invidunt
                </span>
              </a>
            </li>
            <li class="current">
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-male">
                  </i>
                </span>
                <span class="title">
                  Consetetur sadipscing elitr
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-thumbs-up">
                  </i>
                </span>
                <span class="title">
                  Sed diam nonumy
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-female">
                  </i>
                </span>
                <span class="title">
                  At vero eos et
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-beaker">
                  </i>
                </span>
                <span class="title">
                  Sed diam voluptua
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-desktop">
                  </i>
                </span>
                <span class="title">
                  Lorem ipsum dolor
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-compass">
                  </i>
                </span>
                <span class="title">
                  Dolor sit invidunt
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-male">
                  </i>
                </span>
                <span class="title">
                  Consetetur sadipscing elitr
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-thumbs-up">
                  </i>
                </span>
                <span class="title">
                  Sed diam nonumy
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-female">
                  </i>
                </span>
                <span class="title">
                  At vero eos et
                </span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <span class="image">
                  <i class="icon-beaker">
                  </i>
                </span>
                <span class="title">
                  Sed diam voluptua
                </span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </header>
    <div id="container">
      <div id="sidebar" class="sidebar-fixed">
        <div id="sidebar-content">
          <form class="sidebar-search">
            <div class="input-box">
              <button type="submit" class="submit">
                <i class="icon-search">
                </i>
              </button>
              <span>
                <input type="text" placeholder="Search...">
              </span>
            </div>
          </form>
          <div class="sidebar-search-results">
            <i class="icon-remove close">
            </i>
            <div class="title">
              Documents
            </div>
            <ul class="notifications">
              <li>
                <a href="javascript:void(0);">
                  <div class="col-left">
                    <span class="label label-info">
                      <i class="icon-file-text">
                      </i>
                    </span>
                  </div>
                  <div class="col-right with-margin">
                    <span class="message">
                      <strong>
                        John Doe
                      </strong>
                      received $1.527,32
                    </span>
                    <span class="time">
                      finances.xls
                    </span>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);">
                  <div class="col-left">
                    <span class="label label-success">
                      <i class="icon-file-text">
                      </i>
                    </span>
                  </div>
                  <div class="col-right with-margin">
                    <span class="message">
                      My name is
                      <strong>
                        John Doe
                      </strong>
                      ...
                    </span>
                    <span class="time">
                      briefing.docx
                    </span>
                  </div>
                </a>
              </li>
            </ul>
            <div class="title">
              Persons
            </div>
            <ul class="notifications">
              <li>
                <a href="javascript:void(0);">
                  <div class="col-left">
                    <span class="label label-danger">
                      <i class="icon-female">
                      </i>
                    </span>
                  </div>
                  <div class="col-right with-margin">
                    <span class="message">
                      Jane
                      <strong>
                        Doe
                      </strong>
                    </span>
                    <span class="time">
                      21 years old
                    </span>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <ul id="nav">
            <li>
              <a href="index.html">
                <i class="icon-dashboard">
                </i>
                Dashboard
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <i class="icon-desktop">
                </i>
                UI Features
                <span class="label label-info pull-right">
                  6
                </span>
              </a>
              <ul class="sub-menu">
                <li>
                  <a href="ui_general.html">
                    <i class="icon-angle-right">
                    </i>
                    General
                  </a>
                </li>
                <li>
                  <a href="ui_buttons.html">
                    <i class="icon-angle-right">
                    </i>
                    Buttons
                  </a>
                </li>
                <li>
                  <a href="ui_tabs_accordions.html">
                    <i class="icon-angle-right">
                    </i>
                    Tabs &amp; Accordions
                  </a>
                </li>
                <li>
                  <a href="ui_sliders.html">
                    <i class="icon-angle-right">
                    </i>
                    Sliders
                  </a>
                </li>
                <li>
                  <a href="ui_nestable_list.html">
                    <i class="icon-angle-right">
                    </i>
                    Nestable List
                  </a>
                </li>
                <li>
                  <a href="ui_typography.html">
                    <i class="icon-angle-right">
                    </i>
                    Typography / Icons
                  </a>
                </li>
                <li>
                  <a href="ui_google_maps.html">
                    <i class="icon-angle-right">
                    </i>
                    Google Maps
                  </a>
                </li>
                <li>
                  <a href="ui_grid.html">
                    <i class="icon-angle-right">
                    </i>
                    Grid
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a href="javascript:void(0);">
                <i class="icon-edit">
                </i>
                Form Elements
              </a>
              <ul class="sub-menu">
                <li>
                  <a href="form_components.html">
                    <i class="icon-angle-right">
                    </i>
                    Form Components
                  </a>
                </li>
                <li>
                  <a href="form_layouts.html">
                    <i class="icon-angle-right">
                    </i>
                    Form Layouts
                  </a>
                </li>
                <li>
                  <a href="form_validation.html">
                    <i class="icon-angle-right">
                    </i>
                    Form Validation
                  </a>
                </li>
                <li>
                  <a href="form_wizard.html">
                    <i class="icon-angle-right">
                    </i>
                    Form Wizard
                  </a>
                </li>
              </ul>
            </li>
            <li class="current open">
              <a href="javascript:void(0);">
                <i class="icon-table">
                </i>
                Tables
              </a>
              <ul class="sub-menu">
                <li class="current">
                  <a href="tables_static.html">
                    <i class="icon-angle-right">
                    </i>
                    Static Tables
                  </a>
                </li>
                <li>
                  <a href="http://envato.stammtec.de/themeforest/melon/tables_dynamic.html">
                    <i class="icon-angle-right">
                    </i>
                    Dynamic Tables (DataTables)
                  </a>
                </li>
                <li>
                  <a href="tables_responsive.html">
                    <i class="icon-angle-right">
                    </i>
                    Responsive Tables
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a href="charts.html">
                <i class="icon-bar-chart">
                </i>
                Charts &amp; Statistics
              </a>
            </li>
            <li>
              <a href="javascript:void(0);">
                <i class="icon-folder-open-alt">
                </i>
                Pages
              </a>
              <ul class="sub-menu">
                <li>
                  <a href="login.html">
                    <i class="icon-angle-right">
                    </i>
                    Login
                  </a>
                </li>
                <li>
                  <a href="pages_user_profile.html">
                    <i class="icon-angle-right">
                    </i>
                    User Profile
                  </a>
                </li>
                <li>
                  <a href="pages_calendar.html">
                    <i class="icon-angle-right">
                    </i>
                    Calendar
                  </a>
                </li>
                <li>
                  <a href="pages_invoice.html">
                    <i class="icon-angle-right">
                    </i>
                    Invoice
                  </a>
                </li>
                <li>
                  <a href="404.html">
                    <i class="icon-angle-right">
                    </i>
                    404 Page
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a href="javascript:void(0);">
                <i class="icon-list-ol">
                </i>
                4 Level Menu
              </a>
              <ul class="sub-menu">
                <li class="open-default">
                  <a href="javascript:void(0);">
                    <i class="icon-cogs">
                    </i>
                    Item 1
                    <span class="arrow">
                    </span>
                  </a>
                  <ul class="sub-menu">
                    <li class="open-default">
                      <a href="javascript:void(0);">
                        <i class="icon-user">
                        </i>
                        Sample Link 1
                        <span class="arrow">
                        </span>
                      </a>
                      <ul class="sub-menu">
                        <li class="current">
                          <a href="javascript:void(0);">
                            <i class="icon-remove">
                            </i>
                            Sample Link 1
                          </a>
                        </li>
                        <li>
                          <a href="javascript:void(0);">
                            <i class="icon-pencil">
                            </i>
                            Sample Link 1
                          </a>
                        </li>
                        <li>
                          <a href="javascript:void(0);">
                            <i class="icon-edit">
                            </i>
                            Sample Link 1
                          </a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="javascript:void(0);">
                        <i class="icon-user">
                        </i>
                        Sample Link 1
                      </a>
                    </li>
                    <li>
                      <a href="javascript:void(0);">
                        <i class="icon-external-link">
                        </i>
                        Sample Link 2
                      </a>
                    </li>
                    <li>
                      <a href="javascript:void(0);">
                        <i class="icon-bell">
                        </i>
                        Sample Link 3
                      </a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <i class="icon-globe">
                    </i>
                    Item 2
                    <span class="arrow">
                    </span>
                  </a>
                  <ul class="sub-menu">
                    <li>
                      <a href="javascript:void(0);">
                        <i class="icon-user">
                        </i>
                        Sample Link 1
                      </a>
                    </li>
                    <li>
                      <a href="javascript:void(0);">
                        <i class="icon-external-link">
                        </i>
                        Sample Link 1
                      </a>
                    </li>
                    <li>
                      <a href="javascript:void(0);">
                        <i class="icon-bell">
                        </i>
                        Sample Link 1
                      </a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="javascript:void(0);">
                    <i class="icon-folder-open">
                    </i>
                    Item 3
                  </a>
                </li>
              </ul>
            </li>
          </ul>
          <div class="sidebar-title">
            <span>
              Notifications
            </span>
          </div>
          <ul class="notifications demo-slide-in">
            <li style="display: none;">
              <div class="col-left">
                <span class="label label-danger">
                  <i class="icon-warning-sign">
                  </i>
                </span>
              </div>
              <div class="col-right with-margin">
                <span class="message">
                  Server
                  <strong>
                    #512
                  </strong>
                  crashed.
                </span>
                <span class="time">
                  few seconds ago
                </span>
              </div>
            </li>
            <li style="display: none;">
              <div class="col-left">
                <span class="label label-info">
                  <i class="icon-envelope">
                  </i>
                </span>
              </div>
              <div class="col-right with-margin">
                <span class="message">
                  <strong>
                    John
                  </strong>
                  sent you a message
                </span>
                <span class="time">
                  few second ago
                </span>
              </div>
            </li>
            <li>
              <div class="col-left">
                <span class="label label-success">
                  <i class="icon-plus">
                  </i>
                </span>
              </div>
              <div class="col-right with-margin">
                <span class="message">
                  <strong>
                    Emma
                  </strong>
                  's account was created
                </span>
                <span class="time">
                  4 hours ago
                </span>
              </div>
            </li>
          </ul>
          <div class="sidebar-widget align-center">
            <div class="btn-group" data-toggle="buttons" id="theme-switcher">
              <label class="btn active">
                <input type="radio" name="theme-switcher" data-theme="bright">
                <i class="icon-sun">
                </i>
                Bright
              </label>
              <label class="btn">
                <input type="radio" name="theme-switcher" data-theme="dark">
                <i class="icon-moon">
                </i>
                Dark
              </label>
            </div>
          </div>
        </div>
        <div id="divider" class="resizeable">
        </div>
      </div>
      <div id="content">
        <div class="container">
          <div class="crumbs">
            <ul id="breadcrumbs" class="breadcrumb">
              <li>
                <i class="icon-home">
                </i>
                <a href="index.html">
                  Dashboard
                </a>
              </li>
              <li class="current">
                <a href="pages_calendar.html" title="">
                  Calendar
                </a>
              </li>
            </ul>
            <ul class="crumb-buttons">
              <li>
                <a href="charts.html" title="">
                  <i class="icon-signal">
                  </i>
                  <span>
                    Statistics
                  </span>
                </a>
              </li>
              <li class="dropdown">
                <a href="#" title="" data-toggle="dropdown">
                  <i class="icon-tasks">
                  </i>
                  <span>
                    Users
                    <strong>
                      (+3)
                    </strong>
                  </span>
                  <i class="icon-angle-down left-padding">
                  </i>
                </a>
                <ul class="dropdown-menu pull-right">
                  <li>
                    <a href="form_components.html" title="">
                      <i class="icon-plus">
                      </i>
                      Add new User
                    </a>
                  </li>
                  <li>
                    <a href="http://envato.stammtec.de/themeforest/melon/tables_dynamic.html"
                    title="">
                      <i class="icon-reorder">
                      </i>
                      Overview
                    </a>
                  </li>
                </ul>
              </li>
              <li class="range">
                <a href="#">
                  <i class="icon-calendar">
                  </i>
                  <span>
                  </span>
                  <i class="icon-angle-down">
                  </i>
                </a>
              </li>
            </ul>
          </div>
          <div class="page-header">
            <div class="page-title">
              <h3>
                Static Tables
              </h3>
              <span>
                Good morning, John!
              </span>
            </div>
            <ul class="page-stats">
              <li>
                <div class="summary">
                  <span>
                    New orders
                  </span>
                  <h3>
                    17,561
                  </h3>
                </div>
                <div id="sparkline-bar" class="graph sparkline hidden-xs">
                  20,15,8,50,20,40,20,30,20,15,30,20,25,20
                </div>
              </li>
              <li>
                <div class="summary">
                  <span>
                    My balance
                  </span>
                  <h3>
                    $21,561.21
                  </h3>
                </div>
                <div id="sparkline-bar2" class="graph sparkline hidden-xs">
                  20,15,8,50,20,40,20,30,20,15,30,20,25,20
                </div>
              </li>
            </ul>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="widget box">
                <div class="widget-header">
                  <h4>
                    <i class="icon-reorder">
                    </i>
                    Table Classes
                  </h4>
                  <div class="toolbar no-padding">
                    <div class="btn-group">
                      <span class="btn btn-xs widget-collapse">
                        <i class="icon-angle-down">
                        </i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="widget-content no-padding">
                  <table class="table table-hover table-striped table-bordered table-highlight-head">
                    <thead>
                      <tr>
                        <th>
                          Class
                        </th>
                        <th>
                          Description
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <code>
                            .table
                          </code>
                        </td>
                        <td>
                          Default table styling
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>
                            .table-striped
                          </code>
                        </td>
                        <td>
                          Different background for even rows
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>
                            .table-bordered
                          </code>
                        </td>
                        <td>
                          Default bordered table
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>
                            .table-hover
                          </code>
                        </td>
                        <td>
                          Change background color for rows on hover
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>
                            .table-condensed
                          </code>
                        </td>
                        <td>
                          Smaller padding
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>
                            .table-checkable
                          </code>
                        </td>
                        <td>
                          Each row is checkable if a checkbox is provided
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>
                            .table-no-inner-border
                          </code>
                        </td>
                        <td>
                          Remove inner borders if borders were applied
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>
                            .table-highlight-head
                          </code>
                        </td>
                        <td>
                          Darker background for table-head
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>
                            .table-checkable
                          </code>
                        </td>
                        <td>
                          Table with checkboxes
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>
                            .table-vertical-align
                          </code>
                        </td>
                        <td>
                          Centering all rows vertically
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>
                            div.table-footer
                          </code>
                        </td>
                        <td>
                          Footer for static tables. Goes after table
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <code>
                            div.widget-content.no-padding
                          </code>
                        </td>
                        <td>
                          Removes padding from widget
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="widget box">
                <div class="widget-header">
                  <h4>
                    <i class="icon-reorder">
                    </i>
                    Simple Table
                  </h4>
                  <div class="toolbar no-padding">
                    <div class="btn-group">
                      <span class="btn btn-xs widget-collapse">
                        <i class="icon-angle-down">
                        </i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="widget-content">
                  <table class="table table-hover">
                    <thead>
                      <tr>
                        <th>
                          #
                        </th>
                        <th>
                          First Name
                        </th>
                        <th>
                          Last Name
                        </th>
                        <th class="hidden-xs">
                          Username
                        </th>
                        <th>
                          Status
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          1
                        </td>
                        <td>
                          Joey
                        </td>
                        <td>
                          Greyson
                        </td>
                        <td class="hidden-xs">
                          joey123
                        </td>
                        <td>
                          <span class="label label-success">
                            Approved
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          2
                        </td>
                        <td>
                          Wolf
                        </td>
                        <td>
                          Bud
                        </td>
                        <td class="hidden-xs">
                          wolfy
                        </td>
                        <td>
                          <span class="label label-info">
                            Pending
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          3
                        </td>
                        <td>
                          Darin
                        </td>
                        <td>
                          Alec
                        </td>
                        <td class="hidden-xs">
                          alec82
                        </td>
                        <td>
                          <span class="label label-warning">
                            Suspended
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          4
                        </td>
                        <td>
                          Andrea
                        </td>
                        <td>
                          Brenden
                        </td>
                        <td class="hidden-xs">
                          andry
                        </td>
                        <td>
                          <span class="label label-danger">
                            Blocked
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="widget box">
                <div class="widget-header">
                  <h4>
                    <i class="icon-reorder">
                    </i>
                    Striped Table
                  </h4>
                  <div class="toolbar no-padding">
                    <div class="btn-group">
                      <span class="btn btn-xs widget-collapse">
                        <i class="icon-angle-down">
                        </i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="widget-content">
                  <table class="table table-hover table-striped">
                    <thead>
                      <tr>
                        <th>
                          #
                        </th>
                        <th>
                          First Name
                        </th>
                        <th>
                          Last Name
                        </th>
                        <th class="hidden-xs">
                          Username
                        </th>
                        <th>
                          Status
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          1
                        </td>
                        <td>
                          Joey
                        </td>
                        <td>
                          Greyson
                        </td>
                        <td class="hidden-xs">
                          joey123
                        </td>
                        <td>
                          <span class="label label-success">
                            Approved
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          2
                        </td>
                        <td>
                          Wolf
                        </td>
                        <td>
                          Bud
                        </td>
                        <td class="hidden-xs">
                          wolfy
                        </td>
                        <td>
                          <span class="label label-info">
                            Pending
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          3
                        </td>
                        <td>
                          Darin
                        </td>
                        <td>
                          Alec
                        </td>
                        <td class="hidden-xs">
                          alec82
                        </td>
                        <td>
                          <span class="label label-warning">
                            Suspended
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          4
                        </td>
                        <td>
                          Andrea
                        </td>
                        <td>
                          Brenden
                        </td>
                        <td class="hidden-xs">
                          andry
                        </td>
                        <td>
                          <span class="label label-danger">
                            Blocked
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="widget box">
                <div class="widget-header">
                  <h4>
                    <i class="icon-reorder">
                    </i>
                    Bordered Table
                  </h4>
                  <div class="toolbar no-padding">
                    <div class="btn-group">
                      <span class="btn btn-xs widget-collapse">
                        <i class="icon-angle-down">
                        </i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="widget-content">
                  <table class="table table-hover table-bordered">
                    <thead>
                      <tr>
                        <th>
                          #
                        </th>
                        <th>
                          First Name
                        </th>
                        <th>
                          Last Name
                        </th>
                        <th class="hidden-xs">
                          Username
                        </th>
                        <th>
                          Status
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          1
                        </td>
                        <td>
                          Joey
                        </td>
                        <td>
                          Greyson
                        </td>
                        <td class="hidden-xs">
                          joey123
                        </td>
                        <td>
                          <span class="label label-success">
                            Approved
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          2
                        </td>
                        <td>
                          Wolf
                        </td>
                        <td>
                          Bud
                        </td>
                        <td class="hidden-xs">
                          wolfy
                        </td>
                        <td>
                          <span class="label label-info">
                            Pending
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          3
                        </td>
                        <td>
                          Darin
                        </td>
                        <td>
                          Alec
                        </td>
                        <td class="hidden-xs">
                          alec82
                        </td>
                        <td>
                          <span class="label label-warning">
                            Suspended
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          4
                        </td>
                        <td>
                          Andrea
                        </td>
                        <td>
                          Brenden
                        </td>
                        <td class="hidden-xs">
                          andry
                        </td>
                        <td>
                          <span class="label label-danger">
                            Blocked
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="widget box">
                <div class="widget-header">
                  <h4>
                    <i class="icon-reorder">
                    </i>
                    Condensed Table
                  </h4>
                  <div class="toolbar no-padding">
                    <div class="btn-group">
                      <span class="btn btn-xs widget-collapse">
                        <i class="icon-angle-down">
                        </i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="widget-content">
                  <table class="table table-hover table-condensed">
                    <thead>
                      <tr>
                        <th>
                          #
                        </th>
                        <th>
                          First Name
                        </th>
                        <th>
                          Last Name
                        </th>
                        <th class="hidden-xs">
                          Username
                        </th>
                        <th>
                          Status
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          1
                        </td>
                        <td>
                          Joey
                        </td>
                        <td>
                          Greyson
                        </td>
                        <td class="hidden-xs">
                          joey123
                        </td>
                        <td>
                          <span class="label label-success">
                            Approved
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          2
                        </td>
                        <td>
                          Wolf
                        </td>
                        <td>
                          Bud
                        </td>
                        <td class="hidden-xs">
                          wolfy
                        </td>
                        <td>
                          <span class="label label-info">
                            Pending
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          3
                        </td>
                        <td>
                          Darin
                        </td>
                        <td>
                          Alec
                        </td>
                        <td class="hidden-xs">
                          alec82
                        </td>
                        <td>
                          <span class="label label-warning">
                            Suspended
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          4
                        </td>
                        <td>
                          Andrea
                        </td>
                        <td>
                          Brenden
                        </td>
                        <td class="hidden-xs">
                          andry
                        </td>
                        <td>
                          <span class="label label-danger">
                            Blocked
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="widget">
                <div class="widget-header">
                  <h4>
                    <i class="icon-reorder">
                    </i>
                    Advanced Table
                  </h4>
                  <div class="toolbar no-padding">
                    <div class="btn-group">
                      <span class="btn btn-xs widget-collapse">
                        <i class="icon-angle-down">
                        </i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="widget-content">
                  <table class="table table-striped table-bordered table-checkable table-highlight-head table-no-inner-border table-hover">
                    <thead>
                      <tr>
                        <th class="checkbox-column">
                          <input type="checkbox" class="uniform">
                        </th>
                        <th>
                          Progressbar
                        </th>
                        <th class="align-center">
                          Icons
                        </th>
                        <th class="align-center">
                          Buttons
                        </th>
                        <th class="align-center">
                          Labels
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="checkbox-column">
                          <input type="checkbox" class="uniform">
                        </td>
                        <td>
                          <div class="progress progress-striped active">
                            <div style="width: 30%;" class="progress-bar progress-bar-info">
                            </div>
                          </div>
                        </td>
                        <td class="align-center">
                          <ul class="table-controls">
                            <li>
                              <a href="javascript:void(0);" class="bs-tooltip" title="Search">
                                <i class="icon-search">
                                </i>
                              </a>
                            </li>
                            <li>
                              <a href="javascript:void(0);" class="bs-tooltip" title="Edit">
                                <i class="icon-pencil">
                                </i>
                              </a>
                            </li>
                            <li>
                              <a href="javascript:void(0);" class="bs-tooltip" title="Delete">
                                <i class="icon-trash">
                                </i>
                              </a>
                            </li>
                          </ul>
                        </td>
                        <td class="align-center">
                          <span class="btn-group">
                            <a href="javascript:void(0);" class="btn btn-xs bs-tooltip" title="Search">
                              <i class="icon-search">
                              </i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-xs bs-tooltip" title="Edit">
                              <i class="icon-pencil">
                              </i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-xs bs-tooltip" title="Delete">
                              <i class="icon-trash">
                              </i>
                            </a>
                          </span>
                        </td>
                        <td class="align-center">
                          <span class="label label-warning">
                            X
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td class="checkbox-column">
                          <input type="checkbox" class="uniform">
                        </td>
                        <td>
                          <div class="progress progress-striped active">
                            <div style="width: 60%;" class="progress-bar progress-bar-success">
                            </div>
                          </div>
                        </td>
                        <td class="align-center">
                          <ul class="table-controls">
                            <li>
                              <a href="javascript:void(0);" class="bs-tooltip" title="Search">
                                <i class="icon-search">
                                </i>
                              </a>
                            </li>
                            <li>
                              <a href="javascript:void(0);" class="bs-tooltip" title="Edit">
                                <i class="icon-pencil">
                                </i>
                              </a>
                            </li>
                            <li>
                              <a href="javascript:void(0);" class="bs-tooltip" title="Delete">
                                <i class="icon-trash">
                                </i>
                              </a>
                            </li>
                          </ul>
                        </td>
                        <td class="align-center">
                          <span class="btn-group">
                            <a href="javascript:void(0);" class="btn btn-xs bs-tooltip" title="Search">
                              <i class="icon-search">
                              </i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-xs bs-tooltip" title="Edit">
                              <i class="icon-pencil">
                              </i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-xs bs-tooltip" title="Delete">
                              <i class="icon-trash">
                              </i>
                            </a>
                          </span>
                        </td>
                        <td class="align-center">
                          <span class="label label-danger">
                            X
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td class="checkbox-column">
                          <input type="checkbox" class="uniform">
                        </td>
                        <td>
                          <div class="progress progress-striped active">
                            <div style="width: 80%;" class="progress-bar progress-bar-warning">
                            </div>
                          </div>
                        </td>
                        <td class="align-center">
                          <ul class="table-controls">
                            <li>
                              <a href="javascript:void(0);" class="bs-tooltip" title="Search">
                                <i class="icon-search">
                                </i>
                              </a>
                            </li>
                            <li>
                              <a href="javascript:void(0);" class="bs-tooltip" title="Edit">
                                <i class="icon-pencil">
                                </i>
                              </a>
                            </li>
                            <li>
                              <a href="javascript:void(0);" class="bs-tooltip" title="Delete">
                                <i class="icon-trash">
                                </i>
                              </a>
                            </li>
                          </ul>
                        </td>
                        <td class="align-center">
                          <span class="btn-group">
                            <a href="javascript:void(0);" class="btn btn-xs bs-tooltip" title="Search">
                              <i class="icon-search">
                              </i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-xs bs-tooltip" title="Edit">
                              <i class="icon-pencil">
                              </i>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-xs bs-tooltip" title="Delete">
                              <i class="icon-trash">
                              </i>
                            </a>
                          </span>
                        </td>
                        <td class="align-center">
                          <span class="label label-success">
                            X
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="widget box">
                <div class="widget-header">
                  <h4>
                    <i class="icon-reorder">
                    </i>
                    Table with Footer
                  </h4>
                  <div class="toolbar no-padding">
                    <div class="btn-group">
                      <span class="btn btn-xs widget-collapse">
                        <i class="icon-angle-down">
                        </i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="widget-content">
                  <table class="table table-hover table-striped table-bordered table-highlight-head">
                    <thead>
                      <tr>
                        <th>
                          #
                        </th>
                        <th>
                          First Name
                        </th>
                        <th>
                          Last Name
                        </th>
                        <th class="hidden-xs">
                          Username
                        </th>
                        <th>
                          Status
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          1
                        </td>
                        <td>
                          Joey
                        </td>
                        <td>
                          Greyson
                        </td>
                        <td class="hidden-xs">
                          joey123
                        </td>
                        <td>
                          <span class="label label-success">
                            Approved
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          2
                        </td>
                        <td>
                          Wolf
                        </td>
                        <td>
                          Bud
                        </td>
                        <td class="hidden-xs">
                          wolfy
                        </td>
                        <td>
                          <span class="label label-info">
                            Pending
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          3
                        </td>
                        <td>
                          Darin
                        </td>
                        <td>
                          Alec
                        </td>
                        <td class="hidden-xs">
                          alec82
                        </td>
                        <td>
                          <span class="label label-warning">
                            Suspended
                          </span>
                        </td>
                      </tr>
                      <tr>
                        <td>
                          4
                        </td>
                        <td>
                          Andrea
                        </td>
                        <td>
                          Brenden
                        </td>
                        <td class="hidden-xs">
                          andry
                        </td>
                        <td>
                          <span class="label label-danger">
                            Blocked
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="row">
                    <div class="table-footer">
                      <div class="col-md-6">
                        <div class="table-actions">
                          <label>
                            Apply action:
                          </label>
                          <select class="select2" data-minimum-results-for-search="-1" data-placeholder="Select action...">
                            <option value="">
                            </option>
                            <option value="Edit">
                              Edit
                            </option>
                            <option value="Delete">
                              Delete
                            </option>
                            <option value="Move">
                              Move
                            </option>
                          </select>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <ul class="pagination">
                          <li class="disabled">
                            <a href="javascript:void(0);">
                              &larr; Prev
                            </a>
                          </li>
                          <li class="active">
                            <a href="javascript:void(0);">
                              1
                            </a>
                          </li>
                          <li>
                            <a href="javascript:void(0);">
                              2
                            </a>
                          </li>
                          <li>
                            <a href="javascript:void(0);">
                              3
                            </a>
                          </li>
                          <li>
                            <a href="javascript:void(0);">
                              4
                            </a>
                          </li>
                          <li>
                            <a href="javascript:void(0);">
                              Next &rarr;
                            </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </body>

</html>